<template>
  <view class="column callBack">
    <view class="column service" style="background: linear-gradient(180deg, #FFF2DD 0%, #FFFFFF 100%);">
      <image :src="shoutYelloBig" mode="" class=""></image>
      <view style="color:#FD9B00">呼叫安蓝服务</view>
      <image :src="shoutYello" mode=""></image>
    </view>
    <view class="messages">
      <view class="">
        <view class="space-between line">
          <view>姓名</view>
          <view>{{orderDetaAll.driver_name}}</view>
        </view>
        <view class="space-between line">
          <view>手机号</view>
          <view>{{orderDetaAll.driver_mobile}}</view>
        </view>
        <view class="space-between line">
          <view>服务内容</view>
          <view>{{orderDetaAll.cate}}</view>
        </view>
        <view class="space-between line">
          <view>预约时间</view><input class="uni-input" placeholder="点击输入预约时间" v-model="data" />
        </view>
        <view class="space-between line">
          <view>预约地点</view><input class="uni-input" placeholder="点击输入预约地点" v-model="locat" />
        </view>
        <view class="space-between line" style="align-items: flex-start;border-bottom: 0px;">
          <view>备注</view><textarea class="textarea" v-model="value" placeholder="请简单描述..."
            :auto-height='true'></textarea>
        </view>
      </view>
      <view class="call" style="background:#FD9B00;" @click="submit()">立即呼叫</view>
    </view>
  </view>
  <view style="width:100%;text-align: center;margin-top:10rpx">
    <uni-icons type="close" size="40" color="#fff" @click="close()"></uni-icons>
  </view>
</template>

<script setup lang="ts">
  import { showLoading, errorToast } from '@/utils/prompt';
  import { toPublish } from '@mqtt';
  import { shoutYello, shoutYelloBig } from '@/utils/Static';
  import { ref, onMounted } from 'vue';
  const props = defineProps({
    orderDetaAll: {
      type: Object
    },
  });
  const value = ref('');
  const data = ref('')
  const locat = ref('')
  const emit = defineEmits(['close', 'success']);
  onMounted(() => {
    data.value = props.orderDetaAll.subtime
    locat.value = props.orderDetaAll.address
    value.value = props.orderDetaAll.driver_des
  })
  function submit() {
    showLoading('正在加载');
    const payload = {
      id:props.orderDetaAll.id,
      cate: '加注车用尿素',
      subtime: data.value,
      address: locat.value,
      des: value.value,
    };
    toPublish('driver/cuiCall', payload, (obj : any) => {
      uni.hideLoading();
      const { code, msg } = obj;
        emit('close')
      if (code === 1) {
        emit('success')
      } else {
        errorToast(msg)
      }
    });
  }
  function close() {
    emit('close')
  }
</script>

<style scoped lang="less">
  @import url('../callBack/less/callBack.less');
</style>
<style>
  .space-between>>>.textarea {
    width: 70%;
    text-align: right;
  }
</style>